import { ref, watch, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

export default function useLine({ id, data, key, selectLegendValues }) {
  const chartDom = ref<HTMLDivElement | null>(null)
  let myChart: echarts.ECharts | null = null
  // 格式化Y轴数据，将1000以上的数值转换为w表示
  const formatterYAxis = (value: number) => {
    if (value >= 1000) {
      return (value / 10000).toFixed(1) + 'w'
    }
    return value
  }

  const initChart = () => {
    if (!chartDom.value) return

    // 销毁旧图表
    if (myChart) {
      myChart.dispose()
    }

    // 初始化新图表
    myChart = echarts.init(chartDom.value)

    // 准备图表数据
    const chartData = data[key]
    if (!chartData) return

    const { xaxisList, yaxisList } = chartData

    // 计算并设置合理的标签间隔
    const calculateInterval = (dataLength: number) => {
      if (dataLength <= 5) return 0 // 数据点少则显示所有
      if (dataLength <= 10) return 1 // 中等数据量间隔1
      return Math.floor(dataLength / 5) // 大数据量显示约5个标签
    }

    const interval = calculateInterval(xaxisList.length)

    // 配置图表选项
    const option: echarts.EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
      },
      legend: {
        type: 'scroll', // 支持滚动
        orient: 'horizontal', // 水平排列
        top: 30, // 置顶显示
        left: 30,
        right: 30,
        height: 80, // 增加高度，容纳更多内容
        data: yaxisList.map((item) => item.name),
        selected: yaxisList.reduce((prev, item, index) => {
          selectLegendValues ? selectLegendValues.value.includes(item?.name.split('-')[1]) ? (prev[item?.name || ''] = true) : (prev[item?.name || ''] = false) : (prev[item?.name || ''] = true)
          return prev
        }, {}),
        textStyle: {
          color: '#333',
          fontSize: 10,
        },
        pageIconSize: 12, // 翻页图标大小
        pageTextStyle: {
          fontSize: 10,
        },
        pageButtonPosition: 'end', // 翻页按钮位置
        itemWidth: 12, // 图例标记宽度
        itemHeight: 12, // 图例标记高度
        itemGap: 8, // 图例项间距
      },
      grid: {
        left: '5%', // 减少左侧边距
        right: '5%', // 减少右侧边距
        bottom: '5%', // 增加底部边距，确保标签显示
        top: 80, // 顶部边距，为图例留出空间
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: xaxisList.map((date) => {
          // 严格格式化为 MM-DD
          if (date.indexOf('-') > -1) {
            const dateObj = new Date(date)
            const month = String(dateObj.getMonth() + 1).padStart(2, '0')
            const day = String(dateObj.getDate()).padStart(2, '0')
            return `${month}-${day}`
          } else {
            return date
          }
        }),
        axisLine: {
          lineStyle: {
            color: '#999',
          },
        },
        axisLabel: {
          color: '#666',
          fontSize: 10,
          rotate: 0, // 水平显示
          interval: interval, // 根据数据量计算间隔
          align: 'center',
          verticalAlign: 'middle',
          // 优化字体和间距，确保一行显示
          fontFamily: 'Arial, sans-serif',
          width: 40, // 限制标签宽度
          overflow: 'truncate', // 超出部分截断
        },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#999',
          },
        },
        axisLabel: {
          color: '#666',
          fontSize: 10,
          formatter: formatterYAxis,
          margin: 10,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#eee',
          },
        },
      },
      series: yaxisList.map((item) => ({
        name: item.name,
        type: 'line',
        data: item.data,
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        lineStyle: {
          width: 1.5,
        },
      })),
      backgroundColor: '#fff'
    }

    // 应用配置
    myChart.setOption(option)

    // 监听窗口大小变化，重新绘制图表
    const resizeHandler = () => {
      myChart?.resize()
    }

    window.addEventListener('resize', resizeHandler)

    // 组件卸载时清理
    onUnmounted(() => {
      window.removeEventListener('resize', resizeHandler)
      myChart?.dispose()
      myChart = null
    })
  }

  // 监听数据变化，更新图表
  watch(
    () => [data[key], selectLegendValues?.value],
    () => {
      initChart()
    },
    { deep: true },
  )
  // 组件挂载时初始化图表
  onMounted(() => {
    chartDom.value = document.getElementById(id) as HTMLDivElement
    initChart()
  })
}
